<template>
	<view>
		<!-- 1，头像 -->
		<view class="con" @click="changeHead">
			<view class="box">
				<view class="box-title">
					<text>头像</text>
				</view>
				<view class="box-con">
					<view class="box-con-img">
						<image :src="userData.head"></image>
					</view>
					<view class="box-con-more">
						<image :src="goMoreImg"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 2，昵称 -->
		<view class="con" @click="changeNickname">
			<view class="box">
				<view class="box-title">
					<text>昵称</text>
				</view>
				<view class="box-con">
					<view class="box-con-text">
						<text>{{userData.nickname}}</text>
					</view>
					<view class="box-con-more">
						<image :src="goMoreImg"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 3，性别 -->
		<view class="con" @click="changeGender">
			<view class="box">
				<view class="box-title">
					<text>性别</text>
				</view>
				<view class="box-con">
					<view class="box-con-text">
						<text>{{userData.gender == '1' ? '男' : '女'}}</text>
					</view>
					<view class="box-con-more">
						<image :src="goMoreImg"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 4，手机号 -->
		<view class="con">
			<view class="box">
				<view class="box-title">
					<text>手机号</text>
				</view>
				<view class="box-con">
					<view class="box-con-text">
						<text>{{userData.phone}}</text>
					</view>
					<view class="box-con-more">
						<image :src="goMoreImg"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 5，账号 -->
		<view class="con" @click="copyUsername">
			<view class="box">
				<view class="box-title">
					<text>UID</text>
				</view>
				<view class="box-con">
					<view class="box-con-text">
						<text>{{userData.username}}</text>
					</view>
					<view class="box-con-more">
						<image :src="goMoreImg"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 6，生日 -->
		<view class="con">
			<my-date @changeDate="changeBirthday">
				<view class="box">
					<view class="box-title">
						<text>生日</text>
					</view>
					<view class="box-con">
						<view class="box-con-text">
							<text>{{userData.birthday}}</text>
						</view>
						<view class="box-con-more">
							<image :src="goMoreImg"></image>
						</view>
					</view>
				</view>
			</my-date>
		</view>
		<!-- 7，地址 -->
		<view class="con">
			<my-address @change="changeAddress">
				<view class="box">
					<view class="box-title">
						<text>地址</text>
					</view>
					<view class="box-con">
						<view class="box-con-text">
							<text>{{userData.address}}</text>
						</view>
						<view class="box-con-more">
							<image :src="goMoreImg"></image>
						</view>
					</view>
				</view>
			</my-address>
		</view>


		<!-- 8.1，修改昵称弹框 -->
		<user-set-nickname :share="isShowNickname" @submitText="submitSetNickname" @display="displaySetNickname">
		</user-set-nickname>
		<!-- 8.2，修改性别弹框 -->
		<user-set-gender :share="isShowGender" @updateGender="updateGender" @display="displaySetGender">
		</user-set-gender>
	</view>
</template>

<script>
	import myAddress from '@/components/common/my-address/my-address.vue'
	import myDate from '@/components/common/my-date/my-date.vue'
	import userSetNickname from './child/user-set-nickname.vue'
	import userSetGender from './child/user-set-gender.vue'

	import {
		userInfoList
	} from './userInfo.js'
	import {
		getUserInfo
	} from '@/api/http/main/my/user.js'

	import {
		chooseIamgeFromAlbum,
	} from '@/api/uniapp/uni.js'
	import {
		uploadFile
	} from '@/api/http/common.js'
	import {
		updateUserInfo
	} from '@/api/http/main/my/user.js'

	import {
		spacToday
	} from '@/utils/time/time.js'

	export default {
		components: {
			myAddress,
			myDate,
			userSetGender,
			userSetNickname
		},
		data() {
			return {
				goMoreImg: require('@/static/img/common/goMore.svg'),
				userId: uni.getStorageSync('userId'),
				userData: {},
				isShowNickname: false,
				isShowGender: false
			}
		},
		methods: {
			//1，查询信息
			getUserInfo() {
				getUserInfo(this.userId).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//2.3，参数保存
					this.userData = res.data.busInfo
					//console.log(this.userData)
				})
			},
			//2，修改头像
			async changeHead() {
				//console.log(uni.getSystemInfoSync().platform)
				var that = this
				chooseIamgeFromAlbum().then(res => {
					uploadFile(res).then(result => {
						var datas = result.data
						if (datas.pubInfo.code !== 0) {
							return uni.$showMsg(datas.pubInfo.message);
						}
						//文件上传后头像地址
						var newHead = datas.busInfo

						var reqData = {
							'head': newHead
						}
						//修改用户信息
						updateUserInfo(reqData).then(resultData => {
							if (resultData.data.pubInfo.code !== 0) {
								return uni.$showMsg(resultData.data.pubInfo.message);
							}
							uni.$showMsg('更新成功！')
							uni.setStorageSync('head', newHead)

							that.getUserInfo()
						})
					})
				})
			},

			//3.1，修改用户昵称
			changeNickname() {
				this.isShowNickname = true
			},
			//3.2，关闭修改用户昵称弹框
			displaySetNickname() {
				this.isShowNickname = false
			},
			//3.3，提交修改昵称
			submitSetNickname(e) {
				if (e == uni.getStorageSync('nickname')) {
					return uni.$showMsg('两次昵称一样！');
				}
				var nickLen = e.length
				if (nickLen < 3 || nickLen > 12) {
					return uni.$showMsg('昵称长度只能为3-12！');
				}
				var reqData = {
					nickname: e
				}
				var that = this
				updateUserInfo(reqData).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					that.isShowNickname = false
					uni.$showMsg('更新成功！')
					uni.setStorageSync('nickname', e)

					//刷新数据
					//that.getUserInfo()
					that.userData.nickname = e
				})
			},

			//4.1，展示性别修改
			changeGender() {
				this.isShowGender = true
			},
			//4.2，关闭修改性别弹框
			displaySetGender() {
				this.isShowGender = false
			},
			//4.3，修改性别提交
			updateGender(e) {
				var reqData = {
					'gender': e
				}
				var that = this
				updateUserInfo(reqData).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					uni.$showMsg('更新成功！')
					uni.setStorageSync('gender', e)

					//关闭
					that.isShowGender = false
					that.userData.gender = e
				})
			},

			//5，复制账号
			copyUsername() {
				return uni.setClipboardData({
					data: uni.getStorageSync('username'),
					success: () => {
						uni.showToast({
							title: '账号已复制'
						})
					}
				})
			},

			//6，更换生日
			changeBirthday(date) {
				// var today = new Date();
				// var isUpdate = spacToday(date)
				// if (!isUpdate) {
				// 	return uni.$showMsg('生日不能超过今天！');
				// }
				var reqData = {
					'birthday': date
				}
				var that = this
				updateUserInfo(reqData).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					uni.$showMsg('更新成功！')
					uni.setStorageSync('birthday', date)

					that.userData.birthday = date
				})
			},

			//7，修改地址
			changeAddress(data) {
				var txt = data.data.join('')

				var reqData = {
					'address': txt
				}
				var that = this
				updateUserInfo(reqData).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					uni.$showMsg('更新成功！')
					uni.setStorageSync('address', txt)

					//关闭
					that.userData.address = txt
				})
			}
		},
		onLoad() {
			this.getUserInfo()
		}
	}
</script>


<style scoped lang="scss">
	.con {
		width: 100%;
		height: 100rpx;

		&:active {
			background-color: #f3f3f3;
		}

		.box {
			width: 92%;
			margin: 0 4%;
			display: flex;
			justify-content: space-between;
			// border-bottom: solid 1rpx #eee;

			.box-title {
				line-height: 100rpx;

				text {
					font-size: 30rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
				}
			}

			.box-con {
				display: flex;
				justify-content: right;

				.box-con-img {
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-top: 10rpx;
					}
				}

				.box-con-more {
					image {
						width: 40rpx;
						height: 40rpx;
						margin-left: 20rpx;
						margin-top: 30rpx;
					}
				}

				.box-con-text {
					text {
						line-height: 100rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: rgba(128, 128, 128, 1);
					}
				}
			}
		}
	}
</style>
